<template>
  <div class="play-info">
    <div class="comput-times">
      <div class="times-title">
        <span>计算场次：</span>
        <div class="btn-box">
          <el-button type="primary" @click="handleCompareScheme">比选方案</el-button>
          <el-button type="success" @click="handleCompute">计算</el-button>
          <el-button type="warning" @click="handleAddCount">新增场次</el-button>
          <el-button v-if="props.showBtn" type="info" class="btn-plus" @click="handleAmplify" link>
            <el-icon>
              <FullScreen />
            </el-icon>
          </el-button>
        </div>
      </div>
      <div class="times-list" v-if="state.ccInfo.length > 0">
        <div
          :class="['times-item', currentTime == index ? 'active' : '']"
          :key="index"
          v-for="(item, index) in state.ccInfo"
          @click="handleClickTime(item, index)"
        >
          <span>{{ item.ccName }}</span>
          <span @click="handleClickDelete(item)">X</span>
        </div>
      </div>
      <div class="times-list" v-else>
        <span>暂无...</span>
      </div>
    </div>
    <div class="result-info">
      <div class="content-box">
        <div class="content-left">
          <div class="left-title">控制断面名称</div>
          <div class="left-box">
            <el-collapse v-model="state.collapseActive" accordion @change="handleSwitchCollapse">
              <el-collapse-item name="1">
                <template #title>
                  <span class="mg10">水库/闸/坝</span>
                </template>
                <div class="tabs-list">
                  <div
                    :class="['list-item', state.current === index ? 'active' : '']"
                    v-for="(item, index) in state.secList.filter(
                      (v) => v.sttp == 'RR' || v.sttp == 'DD' || v.sttp == 'DM'
                    )"
                    :key="index"
                    @click="handleClickSec(item, index)"
                  >
                    <el-tooltip
                      :content="item.blknm"
                      placement="top"
                      :disabled="item.blknm.length < 6"
                    >
                      <span>{{ item.blknm }}</span>
                    </el-tooltip>
                    <span>
                      <el-icon @click.stop="handlePositionSec(item)">
                        <Position />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template #title>
                  <span class="mg10">水文/水位</span>
                </template>
                <div class="tabs-list">
                  <div
                    :class="['list-item', state.current === index ? 'active' : '']"
                    v-for="(item, index) in state.secList.filter(
                      (v) => v.sttp == 'ZQ' || v.sttp == 'ZZ'
                    )"
                    :key="index"
                    @click="handleClickSec(item, index)"
                  >
                    <el-tooltip
                      :content="item.blknm"
                      placement="top"
                      :disabled="item.blknm.length < 6"
                    >
                      <span>{{ item.blknm }}</span>
                    </el-tooltip>
                    <span>
                      <el-icon @click.stop="handlePositionSec(item)">
                        <Position />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div class="content-right">
          <div class="switch-box">
            <div class="comput-result-box">
              <div class="box-title">
                <span>各场次计算结果：</span>
              </div>
              <div class="box-form">
                <div class="form-item">
                  <div class="item-title">
                    <span class="fonsize-color">场次名称:</span>
                    <span>{{ state.ccBaseInfo?.ccName }}</span>
                  </div>
                  <div class="item-title">
                    <span class="fonsize-color">开始/结束时间:</span>
                    <span>
                      <!-- {{ renderTime(state.ccBaseInfo?.startTime) }} -{{
                        renderTime(state.ccBaseInfo?.endTime)
                      }} -->
                      {{ state.ccBaseInfo?.startTime }} --{{ state.ccBaseInfo?.endTime }}
                    </span>
                  </div>
                </div>
                <div class="form-item">
                  <div class="item-title">
                    <span class="fonsize-color">计算耗时:</span>
                    <span>{{ formatSeconds(state.ccBaseInfo?.calTime) }}</span>
                  </div>
                  <div class="item-title">
                    <span class="fonsize-color">评定结果:</span>
                    <span class="pass">{{ calcResult.info?.qual == 1 ? '不合格' : '合格' }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="table-btn">
              <el-button type="primary" @click="handleOpenTable" size="mini">特征值</el-button>
            </div>
            <div class="echarts-box">
              <SwDispatchChart
                v-if="state.waterFlag == 1"
                height="100%"
                :x-labels="state.sysTimes"
                :servers="state.servers"
              />
              <SkDispatchChart
                v-else
                height="100%"
                :x-labels="state.sysTimes"
                :servers="state.servers"
              />
              <!-- <morey-chart height="100%" :servers="state.servers" :x-labels="state.sysTimes" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <mulTable ref="mulTableRef" />
    <countAdd ref="countAddRef" @closeDialog="closeDig" />
    <compareScheme ref="compareSchemeRef" @handleSelectedScheme="handleSelectedScheme" />
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineEmits, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import moreyChart from '@/components/app-echart/water-station-chart.vue'
//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
//多表头表格
import mulTable from './cpns/mulTable.vue'
import { renderTime } from '@/utils/index'
//新增场次
import countAdd from './cpns/countAdd.vue'
import { useUnitInfo, useBlkcd } from '@/store/modules/compute-methods.js'
import { storeToRefs } from 'pinia'
import {
  getAreaSecList,
  getSchemesCount,
  deleteCount,
  getCountResult,
  areaCalculate
} from '@/services/modules/compute-methods'
//比选方案
import compareScheme from './cpns/compareScheme.vue'
import emitter from '@/utils/bus'
const compareSchemeRef = ref(null)
const countAddRef = ref(null)
const mulTableRef = ref(null)
const currentTime = ref('')
const calcResult = reactive({
  info: {},
  ccResult: {},
  // 统计图左侧列表信息
  eigResult: [
    // floodPeak:洪峰，floodVolume：洪量，waterLevel：水位，FlashTime：洪现时间
    {
      leftKey: '模拟',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    },
    {
      leftKey: '实测',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    },
    {
      leftKey: '误差',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    },
    {
      leftKey: '许可误差',
      floodPeak: '',
      floodVolume: '',
      waterLevel: '',
      flashTime: ''
    }
  ]
})
const state = reactive({
  waterFlag: 1,
  collapseActive: '1',
  secList: [],
  current: -1,
  legends: [],
  servers: [],
  //场次信息
  ccBaseInfo: {},
  //比选方案id集合
  bacids: '',
  //场次结果参数
  ccResultParams: {
    ccid: '',
    blkcd: ''
  },
  //方案特征值集合
  eigResultArr: [],
  // 场次列表
  ccInfo: [],
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  tableData: [],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: [],
  //警戒信息
  warnInfo: {},
  //预报时间
  fcTime: ''
})
const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 0
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  zoneId: {
    type: Number,
    default: 1
  }
})
watch(
  () => props.zId,
  () => {
    getSecList(props.zId)
  },
  { immediate: true, deep: true }
)
watch(
  () => props.schemeId,
  () => {
    getSchemesCountList(props.schemeId)
  },
  { immediate: true, deep: true }
)
//秒转小时分钟
function formatSeconds(value) {
  var theTime = parseInt(value) // 需要转换的时间秒
  var theTime1 = 0 // 分
  var theTime2 = 0 // 小时
  var theTime3 = 0 // 天
  if (theTime > 60) {
    theTime1 = parseInt(theTime / 60)
    theTime = parseInt(theTime % 60)
    if (theTime1 > 60) {
      theTime2 = parseInt(theTime1 / 60)
      theTime1 = parseInt(theTime1 % 60)
      if (theTime2 > 24) {
        //大于24小时
        theTime3 = parseInt(theTime2 / 24)
        theTime2 = parseInt(theTime2 % 24)
      }
    }
  }
  var result = ''
  if (theTime > 0) {
    result = '' + parseInt(theTime) + '秒'
  }
  if (theTime1 > 0) {
    result = '' + parseInt(theTime1) + '分' + result
  }
  if (theTime2 > 0) {
    result = '' + parseInt(theTime2) + '小时' + result
  }
  if (theTime3 > 0) {
    result = '' + parseInt(theTime3) + '天' + result
  }
  return result
}
//获取区域场次列表
function getSchemesCountList(id) {
  getSchemesCount({ scid: id }).then((res) => {
    if (res.code === 200) {
      state.ccInfo = res.data
      if (state.ccInfo.length) {
        handleClickTime(state.ccInfo[0], 0)
      } else {
        handleClickTime('', 0)
      }
    }
  })
}
//
function handleOpenTable() {
  mulTableRef.value.handleOpenModal(state.eigResultArr)
}
function clearEchart() {
  state.sysTimes = []
  state.rainArr = []
  state.rqArr = []
  state.fqArr = []
  state.rzArr = []
  state.fzArr = []
  state.warnInfo = {}
  state.fcTime = ''
  state.servers = []
}
function handlePositionSec(item) {
  emitter.emit('fixedPosition', item)
}
//点击控制断面查询
function handleClickSec(item, index) {
  state.servers = []
  nextTick(() => {
    emitter.emit('clearEcharts')
  })
  if (item.sttp == 'RR') {
    state.waterFlag = 2
    console.log('11')
  } else {
    state.waterFlag = 1
    console.log('22')
  }
  clearEchart()
  state.current = index

  // emitter.emit('fixedPosition', item)
  emitter.emit('fixedSec', item.blkcd)
  state.ccResultParams.blkcd = item.blkcd
  getCountResult(state.ccResultParams).then((res) => {
    if (res.code === 200 && res.data) {
      state.servers = res.data[0].result
      state.servers = state.servers.map((item) => {
        return { ...item, ...res.data[0].info, scName: item.scInfo.sc_name }
      })
      state.eigResultArr = res.data[0].result
      // if (res.data[0].result == []) {
      //   state.servers = [];
      //   emitter.emit("clearEcharts");
      // }
      state.ccBaseInfo = res.data[0].info
      // state.fcTime = state.ccBaseInfo.fcTime
      // state.eigResultArr.forEach((item) => {
      //   if (item.ccResult.length) {
      //     item.ccResult.forEach((v) => {
      //       state.sysTimes.push(v.tm)
      //       // state.rainArr.push(v.p)
      //       // state.rqArr.push(v.rq)
      //       // state.fqArr.push(v.fq)
      //       // state.rzArr.push(v.rz)
      //       // state.fzArr.push(v.fz)
      //     })
      //     state.warnInfo = item.warnInfo
      //   }
      // })
    }
  })
}
// 点击场次
function handleClickTime(item, index) {
  // 如果场次存在
  if (item) {
    state.ccResultParams.ccid = item.id
    storeToRefs(useBlkcd()).ccid.value = item.id
    currentTime.value = index
    state.current = -1
    state.ccBaseInfo = {}
    clearEchart()
    state.current = -1
    state.ccBaseInfo = {}
    clearEchart()
    //如果场次存在的同时 有水库或水文
    if (state.secList.filter((v) => v.sttp == 'RR')) {
      // 默认选中第一个水库
      handleSwitchCollapse(1)
    } else {
      // 默认选中第一个水文
      handleSwitchCollapse(0)
    }
  } else {
    // 如果场次不存在
    console.log('孤雁美国')
    state.ccResultParams.ccid = ''
    storeToRefs(useBlkcd()).ccid.value = ''
    handleClickSec(state.secList.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
//获取断面列表
function getSecList(id) {
  getAreaSecList({ zid: id, zoneId: 2 }).then((res) => {
    if (res.code === 200) {
      state.secList = res.data
      // if(state.secList.length){
      //      handleClickSec(state.secList[0],0)
      // }
    }
  })
}

function handleCompareScheme() {
  compareSchemeRef.value.handleOpenModal({
    zId: props.zId,
    schemeId: props.schemeId
  })
}
function handleSwitchCollapse(val) {
  state.current = 0
  if (val == 1) {
    handleClickSec(state.secList.filter((v) => v.sttp == 'RR')[0], 0)
  } else {
    handleClickSec(state.secList.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
//刷新场次
function closeDig() {
  getSchemesCountList(props.schemeId)
}
function handleClickDelete(item) {
  ElMessageBox.confirm(`是否删除${item.ccCode}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteCount({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          getSchemesCountList(props.schemeId)
        }
      })
    })
    .catch(() => {})
}
function handleSelectedScheme(arr) {
  state.bacids = arr
  areaCalculate({
    scid: props.schemeId,
    ccid: state.ccResultParams.ccid,
    zoneId: props.zoneId,
    bscids: state.bacids
  }).then((res) => {
    if (res.code === 200) {
      if (state.secList.filter((v) => v.sttp == 'RR')) {
        // 默认选中第一个水库
        handleSwitchCollapse(1)
      } else {
        // 默认选中第一个水文
        handleSwitchCollapse(0)
      }
    }
  })
}
function handleCompute() {
  areaCalculate({
    scid: props.schemeId,
    ccid: state.ccResultParams.ccid,
    zoneId: props.zoneId,
    bscids: state.bacids
  }).then((res) => {
    if (res.code === 200) {
      console.log(res)
    }
  })
}
function handleAddCount() {
  countAddRef.value.handleOpenModal(props.schemeId)
}
const emit = defineEmits(['showDialog'])
// 放大
function handleAmplify() {
  emit('showDialog')
}
</script>

<style lang="less" scoped>
.fonsize-color {
  color: #797979;
}
.play-info {
  width: 100%;
  height: 100%;
  .comput-times {
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
    .times-title {
      height: 40px;
      display: flex;
      justify-content: space-between;
      span {
        // font-weight: 600;
        color: #409eff;
      }
      .btn-box {
        .btn-plus {
          font-size: 25px;
          font-weight: bold;
        }
      }
    }
    .times-list {
      display: flex;
      width: 100%;
      height: 40px;
      overflow-x: auto;
      white-space: nowrap;
      span {
        width: 100%;
        text-align: center;
      }
      .times-item {
        width: 150px;
        height: 30px;
        border: 1px solid gray;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 10px;
        padding: 0 15px;
        cursor: pointer;
        &.active {
          span {
            color: #0154db;
          }
        }
        &:hover {
          color: #0154db;
        }
        span {
          color: gray;
        }
      }
    }
  }
  .result-info {
    width: 100%;
    height: calc(100% - 90px);
    .content-box {
      display: flex;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .content-left {
        width: 150px;
        height: calc(100% - 5px);
        border: 1px solid #c8c2c29d;
        .left-title {
          height: 40px;
          background: #eee;
          display: flex;
          justify-content: center;
          align-items: center;
          color: black;
        }
        .left-box {
          height: calc(100% - 40px);
          overflow-y: auto;
          .mg10 {
            text-align: center;
            width: 100%;
            margin-left: 10px;
          }
          :deep(.el-collapse-item__wrap) {
            border: none;
          }
          :deep(.el-collapse-item__header) {
            padding-left: 10px;
          }
          .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 30px;
            text-align: center;
            cursor: pointer;
            &.active {
              span {
                color: #0154db;
              }
            }
            span {
              width: 100%;
              color: black;
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .list-item:hover {
            width: 100%;
            height: 30px;
            cursor: pointer;
            span {
              color: #0154db;
            }
          }
          .box-item {
            height: 30px;
            color: gray;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &.active {
              span:nth-of-type(1) {
                cursor: pointer;
                color: #409eff;
              }
            }
            &:hover {
              span:nth-of-type(1) {
                cursor: pointer;
                color: #409eff;
              }
            }
            span:nth-of-type(2) {
              color: #409eff;
              margin-right: 10px;
            }
          }
        }
      }
      .content-right {
        width: calc(100% - 150px);
        height: 100%;
        .switch-box {
          width: 100%;
          // height: calc(100% - 70px);
          height: 100%;
          overflow-y: auto;
          .comput-result-box {
            width: 100%;
            .box-title {
              height: 30px;
              padding-top: 10px;
              padding-left: 10px;
              span {
                // font-weight: 600;
                color: #409eff;
              }
            }
            .box-form {
              .form-item {
                display: flex;
                justify-content: space-between;
                // flex-wrap: wrap;
                // width: 100%;
                margin-left: 5px;
                .pass {
                  color: #78ba1c;
                }
                .item-title {
                  // flex: 0.25;
                  margin-right: 20px;
                  margin-left: 7px;
                  width: 50%;
                  height: 30px;
                  &:nth-of-type(1) {
                  }
                  span:nth-of-type(1) {
                    margin-right: 10px;
                  }
                  span:nth-of-type(2) {
                    font-weight: 600;
                  }
                }
              }
            }
          }
          .table-btn {
            text-align: right;
          }
          // .computed-table {
          //   width: 100%;
          //   // height: 80px;
          //   overflow-x: auto;
          // }
          .echarts-box {
            width: 100%;
            // height: calc(100% - 70px);
            height: 500px;
            padding: 5px;
          }
        }
      }
    }
  }
}
</style>
